<template>
	<panel title="Check all">
		<form class="form-horizontal"
			@submit.prevent="submit">

			<form-group name="Courses:">
	      		<select class="form-control" v-model="courseSelection" required>
	      			<option v-for="ele in courses" :value="ele.key">{{ ele.value }}</option>
	      		</select>
			</form-group>
			
			<form-group name="Exam Type:">
	      		<select  class="form-control" v-model="examTypeSelection" required>
	      			<option v-for="ele in examTypes" :value="ele.key">{{ ele.value }}</option>
	      		</select>
			</form-group>
			
			<form-group name="Problem Types:">
	    		<div class="row">
		    		<div class="col-xs-6 checkbox" v-for="ele in questypes">
			    		<label class="whitespace">
			    			<input type="checkbox" :value="ele.key" v-model="questypeSelections"> 
			    			{{ ele.value }}
			    		</label>
		    		</div>
	    		</div>				
			</form-group>
		  	
		  	<form-group name="Problem Number:">
	      		<select class="form-control" v-model="problemNumberSelection" required>
	      			<option v-for="ele in problemNumbers" :value="ele">{{ ele }}</option>
	      		</select>
		  	</form-group>

		  	<div class="form-group">
				<div class="col-sm-offset-4 col-sm-10">
					<button type="submit" class="btn btn-primary">Submit</button>
				</div>
			</div>
		</form>
	</panel>
</template>
<script>
	import Panel from 'components/Panel.vue'
	import FormGroup from 'components/FormGroup.vue'

	import { mapState, mapMutations } from 'vuex'
	import { arrayCopy } from 'utils'

	export default {
		computed: {
			questypeSelections: {
  				get() {
	  				return this.$store.state.pages.exam.new.questypeSelections;
	  			},
	  			set(value) {
	  				this.$store.commit('pages/exam/new/questypeSelections', value);
	  			},
	  		},
			courseSelection: {
				get() {
					return this.$store.state.pages.exam.new.courseSelection;
				},
				set(value){
					this.$store.commit('pages/exam/new/courseSelection', value); 
				},
			}, 
			examTypeSelection: {
				get() {
					return this.$store.state.pages.exam.new.examTypeSelection;
				},
				set(value) {
					this.$store.commit('pages/exam/new/examTypeSelection', value);
				}
			},
			problemNumberSelection: {
				get() {
					return this.$store.state.pages.exam.new.problemNumberSelection;
				},
				set(value) {
					this.$store.commit('pages/exam/new/problemNumberSelection', value);
				},
			},
			...mapState('exam', [
	  			'courses',
	  			'examTypes',
	    	]),
			...mapState('pages/exam/new', [
	  			'questypes',
	  			'problemNumbers',
	    	]),
		},
		methods: {
			submit() {
				let router = this.$router;
				let courseid = this.courseSelection;
				let examType = this.examTypeSelection;
				let amount = this.problemNumberSelection;

				// get problems
				this.$store.dispatch(
		    		'pages/exam/running/startNewExam',
		    		{courseid, amount, examType}
		    	);
		    	// clear form data
				this.$store.commit('pages/exam/new/clear');
				// go to running
				this.$store.commit('pages/exam/setView', 'Running');
			},
		},
		components: {
			Panel, FormGroup
		},
	}
</script>